<template>
  <div class="login_bg_style">
    <el-form
      :label-position="labelPosition"
      label-width="auto"
      class="custom_form"
    >
      <el-form-item label="用户名">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="密码">
        <el-input
          v-model="form.pass"
          type="password"
          placeholder="请输入密码"
         autocomplete="new-password"
         show-password
        />
      </el-form-item>
      <el-form-item>
        <el-button class="btn_login_style" type="primary" @click="onSubmit"
          >确定</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus'
// 使用 GET 请求
import { apiFormPost } from '@/util/request.js';
import { setUserSession } from '@/util/session.js';
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import type { FormProps } from "element-plus";
const labelPosition = ref<FormProps["labelPosition"]>("right");
const router = useRouter();
const form = reactive({
  name: "",
  pass: '',
});

  const onSubmit = async() => {
  const  name = form.name;
  if(name===""){
    ElMessage.error('请输入用户名')
    return
  }
   const  pass = form.pass;
 if(pass===""){
    ElMessage.error('请输入密码')
    return
  }
   try {
     // 准备要发送的数据
     const formData = new FormData();
     formData.append('username', name);
     formData.append('pwd', pass);
    const response = await apiFormPost('/api/sys/users/login',formData);
    if(response.success){
      setUserSession("user",response.data)
      router.replace("/manageIndex");
    }else{
       ElMessage.error(response.message)
    }

  } catch (error) {
    console.error('Error:', error);
  }

};

</script>
<style lang="less" scope>
.el-form-item__label {
  color: white !important;
}
.login_bg_style {
  background: url("./images/login_bg.jpeg") no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
  height: 100%;
}
.custom_form {
  width: 250px;
  justify-content: center;
  align-content: center;
}
.btn_login_style {
  width: 50%;
  margin: auto;
}
</style>
